
<template>
    <!--   ==================尾部===============  -->
      <footer>
        <ul class="footer">
            <li @click="toIndex()">
                <div>
                    <i class="fa fa-home"></i>
                </div>
                <p>首页</p>
            </li>
            <li>
                <div>
                    <i class="fa fa-compass"></i>
                </div>
                <p>发现</p>
            </li>
            <li @click="InfoToOrder()">
                <div>
                    <i class="fa fa-file-text-o"></i>
                </div>
                <p>订单</p>
            </li>
            <li @click="toLogin()">
                <div>
                    <i class="fa fa-user-o"></i>
                </div>
                <p>我的</p>
            </li>
        </ul>
    </footer>
</template>

<script>
export default {

    methods:{
        toIndex(){
            this.$router.push('/index')
        },
        toLogin(){
            this.$router.push('/login')
        },
        InfoToOrder(){
            this.$router.push('/order')
        }
    }

}
</script>

<style>

.footer{
    height: 12vm;
    width: 100%;
    background-color: bisque;
    color: white;
    display: flex;

    /* 使用left和bottom的时候，
    需要写position，否则不生效 */
    position: fixed;
    left: 0;
    bottom: 0px;
    /* 将四个li等分 */
    justify-content: space-evenly;
}

.footer li div{
    font-size: 5.0vw;
    text-align: center;
}


.footer li p{
    font-size: 3.8vw;
}

</style>